<template>
  <div class="orderTable">
    <vxe-table
      show-header
      :data="props.tableData"
      :scroll-y="{ enabled: true }"
      height="500"
      :column-config="{ resizable: true }"
      :row-config="{ height: 150, isHover: true }"
    >
      <vxe-column header-align="left" type="checkbox" width="40"></vxe-column>
      <vxe-column field="index" header-align="left" width="60">
        <template #default="scope">
          {{ scope.row.index }}
        </template>
      </vxe-column>
      <vxe-column field="order_name" header-align="left" title="Orders">
        <template #default="scope">
          <strong>{{ scope.row.order_name }}</strong>
          <p>
            <span class="p13777">Amount:</span>
            <strong>{{ scope.row.price }}</strong>
            <span class="p13">{{ scope.row.currency }}</span>
          </p>
          <p>
            <span class="p13777">Shipping:</span
            ><strong>{{ scope.row.price }}</strong>
            <span class="p13">{{ scope.row.currency }}</span>
          </p>
          <p><span class="p13777">Order time: </span></p>
          <p>{{ scope.row.created_at_str }}</p>
        </template>
      </vxe-column>
      <vxe-column field="city" header-align="left" title="Shipping address">
        <template #default="scope">
          <p>{{ scope.row.city }}</p>
          <OrDropdown />
        </template>
      </vxe-column>
      <vxe-column field="attr5" header-align="left" title="Product" width="256">
        <template #default="scope">
          <div>
            <OrderProduct :scope="scope" />
            <div>11</div>
          </div>
        </template>
      </vxe-column>
      <vxe-colgroup header-class-name="vxeColgroup" title="ScareOrder Quote">
        <vxe-column field="attr1" title="Attr1">
          <template #default="scope">
            <strong>{{ scope.row.price }}</strong>
            <span class="p13">{{ scope.row.currency }}</span>
          </template>
        </vxe-column>
        <vxe-column field="attr2" title="Shipping">
          <template #default="scope">
            <strong>{{ scope.row.price }}</strong>
            <span class="p13">{{ scope.row.currency }}</span>
          </template>
        </vxe-column>
        <vxe-column field="attr3" title="Total">
          <template #default="scope">
            <p class="p-22214">
              <strong>{{ scope.row.price }}</strong>
              <span class="p13">{{ scope.row.currency }}</span>
            </p>
            <p class="p13777 line-through">
              {{ scope.row.price }}
              {{ scope.row.currency }}
            </p>
            <p class="p13red">
              {{ scope.row.price }}
              <span class="p13">{{ scope.row.currency }}</span>
            </p>
          </template>
        </vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import OrDropdown from "@/components/OrDropdown/index.vue";
import OrderProduct from "@/components/OrderTable/orderProduct.vue";
import { ref } from "vue";
const tableData = ref([]);
const props = defineProps(["tableData"]);

setTimeout(() => {
  // 模拟数据
  const mockList = [];
  for (let index = 0; index < 500; index++) {
    mockList.push({
      id: index,
      name: "Test" + index,
      role: "Developer",
      sex: "男",
    });
  }
  tableData.value = mockList;
}, 100);
</script>
<style lang="scss">
.orderTable {
  .p13 {
    font-size: 13px;
    margin-left: 5px;
  }
  strong {
    font-weight: 600 !important;
  }

  ::v-deep .vxe-table--render-default .vxe-cell {
    color: var(--unnamed, #777);
    /* 文字/13px-Regular */
    font-size: 13px;
    font-weight: 400;
  }
  .el-table__body-wrapper .el-table__cell {
    vertical-align: top;
  }
  .el-table td.el-table__cell div {
    color: var(--unnamed, #222);
    font-size: 13px;
  }
}
::v-deep .el-table thead.is-group th.el-table__cell {
  background: transparent !important;
  color: var(--unnamed, #777);

  /* 文字/13px-Regular */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
}
/* ::v-deep .el-table__inner-wrapper {
  padding: 0 10px;
} */
::v-deep .el-table .cell {
  padding: 0 20px;
}
::v-deep .el-pagination {
  justify-content: center;
  margin: 10px 0;
}
</style>
